﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../Scripts/crypto-js.js"></script>
  <script src="../Scripts/secret.js"></script>
  <title>装配厂计划看板v1.0</title>
  <style>
    .green {
      color: #0fd850 !important;
    }

    .card {
      border: 1px solid #409EFF;
      border-radius: 10px;
      margin: 3px;
      padding: 4px 7px;
    }

    .item {
      padding: 5px 0px;
    }

    .label {
      padding: 0 10px;
      display: inline-block;
      height: 30px;
      line-height: 30px;
      border-radius: 3px;
      color: #fff;
    }

    .bigstep {
      font-size: 20px;
    }

    .to-dispatch {
      background-color: #e9e9eb;
      color: #909399;
    }

    .to-recv {
      background-color: #CCCC00;
    }

    .to-start {
      background-color: cadetblue;
    }

    .to-report {
      background-color: #409EFF;
    }

    .to-check {
      background-color: red;
    }

    .checked {
      background-color: #0fd850;
    }

    /* 延期未开工 */
    .delay-not-start {
      background-color: red;
    }

    /* 未开工 */
    .not-start {
      background-color: dimgrey;
    }

    /* 超期开工 */
    .delay-start {
      background-color: chocolate;
    }

    /* 按计划开工 */
    .intime-start {
      background-color: darkcyan;
    }

    /* 延期超时完工 */
    .yanqi-delay-finish {
      background-color: #CCCC00;
    }

    /* 延期完工 */
    .yanqi-finish {
      background-color: #060;
    }

    /* 超时完工 */
    .delay-finish {
      background-color: #FF99CC;
    }

    /* 按计划完工 */
    .intime-finish {
      background-color: #0fd850;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak v-on:keyup.enter="getData">
    <el-row class="header">
      <el-col :span="6"><img src="../images/aeec_logo.png" height="60" alt="黎阳LOGO" /></el-col>
      <el-col :span="12" class="header-title">装配厂计划看板</el-col>
      <el-col :span="6" class="currentTime">{{currentTime}}</el-col>
    </el-row>

    <div style="padding: 10px;" id="queryZone">
      <!-- 查询条件区 -->
      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" :rules="rules" :disabled="formDisabled">
        <el-form-item prop='engineno' label="发动机号:">
          <el-autocomplete v-model.trim="queryInfo.engineno" placeholder="请输入发动机号" :trigger-on-focus="false"
            :fetch-suggestions="getEngineNoAsync" :value-key="'engineno'" :debounce="500" style="width:300px;">
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="计划完成时间:" prop="selectdate">
          <el-date-picker v-model="queryInfo.selectdate" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getData">查询</el-button>
          <span class="label delay-not-start">延期未开工</span>
          <span class="label not-start">未开工</span>
          <span class="label delay-start">超期开工</span>
          <span class="label intime-start">按计划开工</span>
          <span class="label yanqi-delay-finish">延期超时完工</span>
          <span class="label yanqi-finish">延期完工</span>
          <span class="label delay-finish">超时完工</span>
          <span class="label intime-finish">按计划完工</span>
        </el-form-item>
      </el-form>

      <!-- 主页表格 -->
      <el-table :data="dataList" stripe border ref="table" height="720" v-loading="loading"
        v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
        element-loading-background="rgba(0,0,0,0.8)">
        <el-table-column type="index" width="50px" fixed></el-table-column>
        <el-table-column label="发动机号" prop="engineno" width="280" fixed>
          <template slot-scope="scope">
            <div class="item" style="font-size: 20px;">
              <strong>发动机号：</strong>{{scope.row.engineno}}
            </div>
            <div class="item">
              <el-popover placement="top-start" title="工作内容:" width="400" trigger="click">
                <span slot="reference" class="el-icon-info">
                  <strong>工作内容:</strong>
                </span>
                <p>发动机号对应大阶段在该月且计划完成时间最晚的大阶段名称。</p>
              </el-popover>
              {{scope.row.lastworkflowstepname}}
            </div>
            <div class="item">
              <el-popover placement="top-start" title="计划节点:" width="400" trigger="click">
                <span slot="reference" class="el-icon-info">
                  <strong>计划节点:</strong>
                </span>
                <p>发动机号对应大阶段在该月且计划完成时间最晚的大阶段计划完成时间。</p>
              </el-popover>
              {{scope.row.lastplandate}}
            </div>
            <div class="item">
              <el-popover placement="top-start" title="计划总耗时:" width="400" trigger="click">
                <span slot="reference" class="el-icon-info">
                  <strong>计划总耗时:</strong>
                </span>
                <p>发动机在本月所有大阶段的计划周期总和。</p>
              </el-popover>
              {{scope.row.planneedhours}}小时
            </div>
            <div class="item">
              <el-popover placement="top-start" title="实际总耗时:" width="400" trigger="click">
                <span slot="reference" class="el-icon-info">
                  <strong>实际总耗时:</strong>
                </span>
                <p>发动机在本月所有单阶段的实际周期总和。</p>
              </el-popover>
              {{scope.row.actualusedhours}}小时
            </div>
            <div class="item">
              <el-popover placement="top-start" title="总差额:" width="400" trigger="click">
                <span slot="reference" class="el-icon-info">
                  <strong>总差额:</strong>
                </span>
                <p>实际总耗时-计划总耗时。</p>
              </el-popover>
              {{scope.row.diffhours}}小时
            </div>
          </template>
        </el-table-column>
        <!-- 动态渲染表格列 -->
        <el-table-column v-for="col in colums" :label="col.label" :key="col.value" :prop="col.value" width="250"
          align="left">
          <template slot-scope="scope">
            <div v-if="scope.row[col.value] && scope.row[col.value].length === 0">
              <el-empty description="该日暂无计划" :image-size="80"></el-empty>
            </div>
            <div v-else>
              <div v-for="i in scope.row[col.value]" class="card">
                <div>
                  <!-- <strong>大阶段名称:</strong> -->
                  <span @click="showDetailInfo(i)" style="cursor:pointer;">
                    <span class="label delay-not-start bigstep"
                      v-if="i.status === '延期未开工'">{{i.workflowstepname}}</span>
                    <span class="label not-start bigstep" v-else-if="i.status === '未开工'">{{i.workflowstepname}}</span>
                    <span class="label delay-start bigstep"
                      v-else-if="i.status === '超期开工'">{{i.workflowstepname}}</span>
                    <span class="label intime-start bigstep"
                      v-else-if="i.status === '按计划开工'">{{i.workflowstepname}}</span>
                    <span class="label yanqi-delay-finish bigstep"
                      v-else-if="i.status === '延期超时完工'">{{i.workflowstepname}}</span>
                    <span class="label yanqi-finish bigstep"
                      v-else-if="i.status === '延期完工'">{{i.workflowstepname}}</span>
                    <span class="label delay-finish bigstep"
                      v-else-if="i.status === '超时完工'">{{i.workflowstepname}}</span>
                    <span class="label intime-finish bigstep" v-else>{{i.workflowstepname}}</span>
                  </span>
                </div>
                <!-- <div style="margin:5px 0px;">
                  <strong>大阶段状态:</strong>
                  <span class="label delay-not-start" v-if="i.status === '延期未开工'">{{i.status}}</span>
                  <span class="label not-start" v-else-if="i.status === '未开工'">{{i.status}}</span>
                  <span class="label delay-start" v-else-if="i.status === '超期开工'">{{i.status}}</span>
                  <span class="label intime-start" v-else-if="i.status === '按计划开工'">{{i.status}}</span>
                  <span class="label yanqi-delay-finish" v-else-if="i.status === '延期超时完工'">{{i.status}}</span>
                  <span class="label yanqi-finish" v-else-if="i.status === '延期完工'">{{i.status}}</span>
                  <span class="label delay-finish" v-else-if="i.status === '超时完工'">{{i.status}}</span>
                  <span class="label intime-finish" v-else>{{i.status}}</span>
                </div> -->
                <div style="margin:5px 0px;">
                  <el-popover placement="top-start" title="完工状态:" width="500" trigger="click">
                    <span slot="reference" class="el-icon-info">
                      <strong>完工状态：</strong>
                    </span>
                    <p>已完成：大阶段下所有任务单全部已完工。</p>
                    <p>进行中：大阶段下任务单有开工的工序且任务单未全部完工报工。</p>
                    <p>未开始：大阶段下没有任何任务单存在开工的工序。</p>
                  </el-popover>
                  <el-tag v-if="i.finishstatus === '已完成'" type="success">{{i.finishstatus}}</el-tag>
                  <el-tag v-else-if="i.finishstatus === '进行中'">{{i.finishstatus}}</el-tag>
                  <el-tag v-else type="info">{{i.finishstatus}}</el-tag>
                </div>
                <div>
                  <el-popover placement="top-start" title="计划周期:" width="400" trigger="click">
                    <span slot="reference" class="el-icon-info">
                      <strong>计划周期</strong>
                    </span>
                    <p>计划周期=大阶段计划完成时间-计划开始时间。</p>
                    <p>计划开始时间: {{i.plannedstartdate.replace('T',' ')}}</p>
                    <p>计划完成时间: {{i.plannedfinishdate.replace('T',' ')}}</p>
                  </el-popover>
                  /
                  <el-popover placement="top-start" title="实际周期:" width="600" trigger="click">
                    <span slot="reference" class="el-icon-info">
                      <strong>实际周期</strong>
                    </span>
                    <p>实际周期=【实际完成时间】（大阶段下所有任务单中末序最晚的实际完成时间）- 【实际开始时间】（大阶段下所有任务单中首序最早的实际开始时间）。</p>
                    <p>
                      【实际开始时间】:
                      <span v-if="i.startworkdate">{{i.startworkdate.replace('T',' ')}}</span>
                      <span v-else>{{i.startworkdate}}</span>
                    </p>
                    <p>
                      【实际完成时间】:
                      <span v-if="i.finishdate">{{i.finishdate.replace('T',' ')}}</span>
                      <span v-else>{{i.finishdate}}</span>
                    </p>
                  </el-popover>
                  /
                  <el-popover placement="top-start" title="差值:" width="400" trigger="click">
                    <span slot="reference" class="el-icon-info">
                      <strong>差值</strong>
                    </span>
                    <p>差额=实际周期-计划周期。</p>
                    <p>颜色标记：正值标记红色，负值标记绿色。</p>
                  </el-popover>
                  <div style="margin:5px 0px;">
                    {{i.planneedhours}} 小时 /
                    <span v-if="i.actualusedhours && i.actualusedhours > 0">{{i.actualusedhours}}小时</span>
                    <span v-else> -- 小时</span> /
                    <span v-if="i.diffhours && i.diffhours > 0" style="color:red;">{{i.diffhours}}小时</span>
                    <span v-else-if="i.diffhours && i.diffhours <= 0" style="color:green;">{{i.diffhours}}小时</span>
                    <span v-else> -- 小时</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage" :page-sizes="[queryInfo.pageSize,100,500]" :page-size="queryInfo.pageSize"
        layout="prev,pager,next,jumper,sizes,total" :total="total">
      </el-pagination>

      <!-- 齐套统计分析弹框 -->
      <el-dialog :title="qiTaoDialog.title" :width="'98%'" :top="'15px'" :center="true"
        :visible.sync="qiTaoDialog.dialogVisiable">
        <!-- 任务单及工序 -->
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="14">
            <h2>任务单齐套统计</h2>
            <el-table :data="qiTaoDialog.containerNoList" stripe border height="300" @row-click="loadContainerNoDetail"
              v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
              element-loading-background="rgba(0,0,0,0.8)" highlight-current-row>
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column label="containerid" prop="containerid" v-if="false"></el-table-column>
              <el-table-column label="workflowid" prop="workflowid" v-if="false"></el-table-column>
              <el-table-column label="发动机号" prop="attributevalue" width="140" show-overflow-tooltip></el-table-column>
              <el-table-column label="订单号" prop="mfgordername" width="140" show-overflow-tooltip></el-table-column>
              <el-table-column label="任务单号" prop="containerno" show-overflow-tooltip></el-table-column>
              <el-table-column label="件号名称" prop="productname" width="140" show-overflow-tooltip></el-table-column>
              <el-table-column label="大阶段" prop="workflowstepname" width="100" show-overflow-tooltip></el-table-column>
              <el-table-column label="齐套率" prop="qitaolv" width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag :type="scope.row.qitaolv === 100 ? 'success' : 'danger'">{{scope.row.qitaolv + '%'}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="预计齐套时间" prop="expectmaterialdate" width="140" show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="10">
            <h2>任务单工序齐套统计</h2>
            <el-table :data="qiTaoDialog.specList" stripe border height="300" @row-click="loadBigAndSmallPart"
              v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
              element-loading-background="rgba(0,0,0,0.8)" highlight-current-row>
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column label="specid" prop="specid" v-if="false"></el-table-column>
              <el-table-column label="任务单" prop="containerno" width="140" show-overflow-tooltip></el-table-column>
              <el-table-column label="工序号" prop="specno" width="60" show-overflow-tooltip></el-table-column>
              <el-table-column label="工序名称" prop="opdesc" width="100" show-overflow-tooltip></el-table-column>
              <el-table-column label="齐套率" prop="qitaorate" width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag :type="scope.row.qitaorate === 100 ? 'success' : 'danger'">{{scope.row.qitaorate + '%'}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="计划开始时间" prop="plannedstartdate" width="135" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="计划完成时间" prop="plannedfinishdate" width="135" show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- 大小件 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <h2>大件列表</h2>
            <el-table :data="qiTaoDialog.bigPartList" stripe border height="300" v-loading="loading"
              v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
              element-loading-background="rgba(0,0,0,0.8)">
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column label="任务单" prop="containerno" width="140" show-overflow-tooltip></el-table-column>
              <el-table-column label="件号" prop="productname" width="120" show-overflow-tooltip></el-table-column>
              <el-table-column label="部件名称" prop="productdesc" show-overflow-tooltip></el-table-column>
              <el-table-column label="单台数量" prop="firstassembleqty" width="75" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="实际数量" prop="confirmqty" width="75" show-overflow-tooltip></el-table-column>
              <el-table-column label="齐套率" prop="qitaorate" width="80" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag :type="scope.row.qitaorate === 100 ? 'success' : 'danger'">{{scope.row.qitaorate + '%'}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="预计齐套时间" prop="expectmaterialdate" width="140" show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <h2>小件列表</h2>
            <el-table :data="qiTaoDialog.smallPartList" stripe border height="300" v-loading="loading"
              v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
              element-loading-background="rgba(0,0,0,0.8)">
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column label="任务单" prop="containerno" width="140" show-overflow-tooltip></el-table-column>
              <el-table-column label="件号" prop="productname" width="120" show-overflow-tooltip></el-table-column>
              <el-table-column label="部件名称" prop="productdesc" show-overflow-tooltip></el-table-column>
              <el-table-column label="单台数量" prop="firstassembleqty" width="75" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="实际数量" prop="confirmqty" width="75" show-overflow-tooltip></el-table-column>
              <el-table-column label="齐套率" prop="qitaorate" width="80" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag :type="scope.row.qitaorate === 100 ? 'success' : 'danger'">{{scope.row.qitaorate + '%'}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="预计齐套时间" prop="expectmaterialdate" width="140" show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-dialog>

      <!-- 零件进度表弹出框 -->
      <el-dialog :title="partProcessDialog.title" :width="'95%'" :top="'15px'" :center="true"
        :visible.sync="partProcessDialog.dialogVisiable">
        <div style="margin: 10px 0px;">
          <span class="label to-dispatch">待派工</span>
          <span class="label to-recv">待接收</span>
          <span class="label to-start">待开工</span>
          <span class="label to-report">待报工</span>
          <span class="label to-check">待检验</span>
          <span class="label checked">已完工</span>
        </div>

        <el-table :data="partProcessDialog.dataList" stripe border ref="table" height="700" v-loading="loading"
          v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)">
          <el-table-column type="index" width="50px"></el-table-column>
          <el-table-column label="任务单号" prop="containerno" width="220"></el-table-column>
          <el-table-column label="订单号" prop="mfgordername" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="发动机" prop="engineno" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="大阶段" prop="bigstep" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="工艺" prop="workflowdesc" width="100" show-overflow-tooltip></el-table-column>
          <!-- 动态渲染表格列 -->
          <el-table-column v-for="col in partProcess" :label="col.label" :key="col.value" :prop="col.value" width="250"
            align="left" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-for="i in scope.row[col.value]">
                <span class="label to-dispatch" v-if="i.status === '待派工'">{{i.workflowstepname}}</span>
                <span class="label to-recv" v-else-if="i.status === '待接收'">{{i.workflowstepname}}</span>
                <span class="label to-start" v-else-if="i.status === '待开工'">{{i.workflowstepname}}</span>
                <span class="label to-report" v-else-if="i.status === '待报工'">{{i.workflowstepname}}</span>
                <span class="label to-check" v-else-if="i.status === '待检验'">{{i.workflowstepname}}</span>
                <span class="label checked" v-else>{{i.workflowstepname}}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <el-backtop></el-backtop>
    </div>
  </div>

  <script type="module">
    import { getParams, fetchSuggestion } from '../Scripts/hooks/useCommonMethod.js'
    import { prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth } from '../Scripts/hooks/useDateShortCut.js'
    const app = new Vue({
      el: '#app',
      data: {
        currentTime: '',
        total: 0,
        loading: false,
        loadingText: '数据加载中...',
        queryInfo: {
          factoryid: '',
          engineno: '',//发动机号
          selectdate: '',//排产时间
          currentPage: 1,//当前页
          pageSize: 10//每页显示条数
        },
        formDisabled: false,
        // 齐套
        qiTaoDialog: {
          dialogVisiable: false,
          title: '',
          containerNoList: [],//任务单齐套统计
          specList: [],//任务单齐套统计
          bigPartList: [],//大件
          smallPartList: []//小件
        },
        //零件进度表
        partProcessDialog: {
          dialogVisiable: false,
          title: '',
          dataList: []
        },
        colums: [],
        partProcess: [],
        selectdateList: [],
        dataList: [],
        rules: {
          selectdate: [{ required: true, message: '计划完成时间不能为空', trigger: 'change' }]
        },
        pickerOptions: { shortcuts: [prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth] }
      },
      methods: {
        // 查询发动机号
        getEngineNoAsync(value, callback) {
          fetchSuggestion({ actionName: 'getEngineNoAsync', name: 'engineno', value, callback })
        },
        // 查询数据
        async getData() {
          this.$refs['queryInfoRef'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空')
            } else {
              const [start, end] = this.queryInfo.selectdate;
              const diff = dayjs(end).diff(dayjs(start), 'day');
              if (diff > 30) {
                return this.$message.error('时间范围不能超过30天');
              }
              this.colums = [];
              this.selectdateList = [];
              for (let i = 0; i <= diff; i++) {
                let value = dayjs(start).add(i, 'day').format('YYYY-MM-DD');
                let label = "";
                const d = dayjs(value).format('d');
                if (d === '0') {
                  label = `${value}【周日】`;
                } else if (d === '1') {
                  label = `${value}【周一】`;
                } else if (d === '2') {
                  label = `${value}【周二】`;
                } else if (d === '3') {
                  label = `${value}【周三】`;
                } else if (d === '4') {
                  label = `${value}【周四】`;
                } else if (d === '5') {
                  label = `${value}【周五】`;
                } else {
                  label = `${value}【周六】`;
                }
                this.colums.push({ value, label, day: d });
                this.selectdateList.push(value);
              }
              this.loading = true;
              this.loadingText = "数据加载中...";
              const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoard.ashx?action=getData', {
                type: 'getData',
                ...this.queryInfo,
                colums: this.selectdateList
              })
              this.loading = false;
              if (res.meta.status === 500) {
                return this.$message.error(res.meta.msg)
              }
              this.dataList = res.data;
              this.total = res.total;
              this.$refs["table"].doLayout();
            }
          })
        },
        showDetailInfo(row) {
          if (row.workflowstepname == "0010-去封/集件" || row.workflowstepname == "0080-集件") {
            const { engineno } = row;
            this.getContainerNoQiTao(engineno, row.workflowstepname);
            this.qiTaoDialog.title = `发动机：${engineno} 齐套信息`;
            this.qiTaoDialog.dialogVisiable = true;
          } else {
            const { engineno, workflowstepname } = row;
            this.getEngineBigStepsContainer(engineno, workflowstepname);
            this.partProcessDialog.title = `发动机【${engineno}】-- 大阶段【${workflowstepname}】-- 任务单完成情况`;
            this.partProcessDialog.dialogVisiable = true;
          }
        },
        // 任务单齐套
        async getContainerNoQiTao(engineno, workflowstepname) {
          this.loading = true;
          this.loadingText = "数据加载中...";
          const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoard.ashx?action=getContainerNoQiTao', {
            type: 'getContainerNoQiTao',
            engineno,
            workflowstepname
          })
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg)
          }
          this.qiTaoDialog.containerNoList = res.data;
          this.qiTaoDialog.specList = [];
          this.qiTaoDialog.bigPartList = [];
          this.qiTaoDialog.smallPartList = [];
        },
        // 工序齐套统计
        async getSpecQiTao(containerid, containerno, workflowid, workflowstepname) {
          this.loading = true;
          this.loadingText = "数据加载中...";
          const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoard.ashx?action=getSpecQiTao', {
            type: 'getSpecQiTao',
            containerid: containerid,
            containerno: containerno,
            workflowid: workflowid,
            workflowstepname: workflowstepname
          })
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg)
          }
          this.qiTaoDialog.specList = res.data;
        },
        // 大小件
        async getBigAndSmallPart(row) {
          this.loading = true;
          this.loadingText = "数据加载中...";
          const { containerno, specid, workflowstepname } = row;
          const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoard.ashx?action=getBigAndSmallPart', {
            type: 'getBigAndSmallPart',
            containerno: containerno,
            specid: specid,
            workflowstepname: workflowstepname
          })
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg)
          }
          this.qiTaoDialog.bigPartList = res.data.filter(item => item.parttype === '大件');//大件
          this.qiTaoDialog.smallPartList = res.data.filter(item => item.parttype === '小件');//小件
        },
        loadContainerNoDetail(row) {
          const { containerid, containerno, workflowid, workflowstepname } = row;
          this.getSpecQiTao(containerid, containerno, workflowid, workflowstepname);
          this.getBigAndSmallPart(row);
        },
        loadBigAndSmallPart(row) {
          this.getBigAndSmallPart(row);
        },
        // 任务单进度表
        async getEngineBigStepsContainer(engineno, workflowstepname) {
          this.loading = true;
          this.loadingText = "数据加载中...";
          const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoard.ashx?action=getEngineBigStepsContainer', {
            type: 'getEngineBigStepsContainer',
            engineno: engineno,
            workflowstepname: workflowstepname
          })
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg)
          }
          this.partProcess = [];
          if (res.data.length > 0) {
            const containermaxsequence = res.data[0].containermaxsequence;
            for (let i = 1; i <= containermaxsequence; i++) {
              this.partProcess.push({ label: `第${i}序`, value: `${i}` });
            }
          }
          this.partProcessDialog.dataList = res.data;
        },
        handleCurrentChange(newPage) {
          this.queryInfo.currentPage = newPage;
          this.getData();
        },
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          this.getData();
        }
      },
      mounted() {
        let incrementNumber = () => {
          setTimeout(incrementNumber, 500);
          this.currentTime = dayjs().format('YYYY年MM月DD日  HH:mm:ss');
        }
        setTimeout(incrementNumber, 500);
        this.queryInfo.factoryid = Decrypt(getParams('factoryid'));
        const start = dayjs().startOf('month').format('YYYY-MM-DD');
        const end = dayjs().endOf('month').format('YYYY-MM-DD');
        // 筛选时间默认：本月
        this.queryInfo.selectdate = [start, end];
        const diff = dayjs(end).diff(dayjs(start), 'day');
        this.colums = [];
        this.selectdateList = [];
        for (let i = 0; i <= diff; i++) {
          let value = dayjs(start).add(i, 'day').format('YYYY-MM-DD');
          let label = "";
          const d = dayjs(value).format('d');
          if (d === '0') {
            label = `${value}【周日】`;
          } else if (d === '1') {
            label = `${value}【周一】`;
          } else if (d === '2') {
            label = `${value}【周二】`;
          } else if (d === '3') {
            label = `${value}【周三】`;
          } else if (d === '4') {
            label = `${value}【周四】`;
          } else if (d === '5') {
            label = `${value}【周五】`;
          } else {
            label = `${value}【周六】`;
          }
          this.colums.push({ value, label, day: d });
          this.selectdateList.push(value);
        }
        this.getData();
      },
      watch: {
        queryInfo: {
          handler() { this.queryInfo.currentPage = 1 },
          deep: true
        }
      }
    })
  </script>
</body>

</html>